<template>
  <div class="nav-tab">
    <template class="container" v-for="item of routes" :key="item.name">
      <a-tooltip class="tooltip">
        <a-tag
          class="tag"
          :closable="item.closable"
          :class="{ selected: item.path === selectedMenuItemUrl }"
          @click="handleClickTag(item)"
          @close="handleClose(tag)"
          >{{ item.title }}</a-tag
        >
      </a-tooltip>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from 'vue'
import { useStore } from '@/store'
import { useRoute, useRouter, RouteLocationNormalized } from 'vue-router'
import { getMenu8Path } from '@/utils/map-menus'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const store = useStore()
    const router = useRouter()
    const menus = store.state.login.userMenu
    // let routes = computed(() => store.state.tag.routeLocations)
    let routes = computed(() => store.state.tag.routeFlat)
    console.log('nav-tab组件中获得的路由：', routes)

    const closeable = ref(true)
    const route = useRoute()
    const selectedMenuItemUrl = ref('')

    watch(
      () => route.path,
      () => {
        const path = route.path
        const menuItem = getMenu8Path(menus, path)
        // store.dispatch('tag/updateStateAction', menuItem)

        if (menuItem) {
          selectedMenuItemUrl.value = menuItem.url
        }
      }
    )

    const handleClose = (tag: any) => {
      console.log('当前点击关闭的tag:', tag)
    }

    const handleClickTag = (menuItem: RouteLocationNormalized) => {
      router.push(menuItem.path)
      emit('update:modelValue', name)
    }

    return {
      routes,
      closeable,
      handleClose,
      handleClickTag,
      selectedMenuItemUrl
    }
  }
})
</script>
<style scoped lang="less">
.nav-tab {
  display: flex;
  align-items: center;
  justify-content: left;

  padding: 0;
}

.container {
}

.tooltip {
  cursor: pointer;
}

.btn {
  margin-right: 3px;
}

.selected {
  background-color: #1890ff;
  color: #fff;
}

.tag {
  padding: 2px;
  padding-left: 4px;
}
</style>
